<!--
 * @Author: gyc
 * @Date: 2020-05-11 13:17:18
 * @LastEditTime: 2020-08-21 14:44:18
 * @Description: Nuxt测试版
 -->
<template>
  <div class="back">
    <header>
      <mo-header></mo-header>
      <div class="mo_block"></div>
    </header>
    <div class="mo-user">
      <div class="user-right">
        <user-aside :admin="isAdmin"></user-aside>
      </div>
      <div class="user-main">
        <nuxt></nuxt>
        <!--    <div class="user-main-mask" v-if="isFollow"></div>-->
      </div>
    </div>
    <footer>
      <mo-footer></mo-footer>
    </footer>
  </div>
</template>
<script>
import head from "@/components/header/header";
import footer from "@/components/footer/footer";
import userAside from "@/components/user/userAside/userAside";
export default {
  name: "userPage",
  data() {
    return {
      headStus: true,
      ctlLeft: "-260px",
      showMenu: true,
      isAdmin: "",
    };
  },
  beforeMount() {
    this.$axios.get("/isAuthenticated").then((res) => {
      this.isAdmin = res.data.isAdmin;
    });
  },
  mounted() {
    //添加监听器
    window.addEventListener("scroll", this.test);
    console.log(this.isAdmin);
  },
  computed: {
    // isFollow() {
    //   if (this.$store.state.asideStus) {
    //     this.ctlLeft = "0px";
    //   } else {
    //     this.ctlLeft = "-260px";
    //   }
    //   return this.$store.state.asideStus;
    // },
  },
  methods: {
    //监听滚动事件
    // test(e) {
    //   let scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   if (scrollTop > 100) {
    //     this.headStus = false;
    //   } else if (scrollTop == 0) {
    //     this.headStus = true;
    //   }
    // }
    seeCtl() {
      // if (this.ctlLeft === "-260px") {
      //   this.ctlLeft = "0px";
      //   this.$store.commit("showAside");
      // } else {
      //   this.ctlLeft = "-260px";
      //   this.$store.commit("hideAside");
      // }
      // this.showMenu = false;
    },
    hideCtl() {
      this.ctlLeft = "-260px";
      this.$store.commit("hideAside");
      // this.showMenu = true;
    },
    showCtl() {
      this.ctlLeft = "0px";
      this.$store.commit("showAside");
    },
  },
  components: {
    "mo-header": head,
    "mo-footer": footer,
    "user-aside": userAside,
  },
};
</script>
<style lang="scss" scoped>
@media screen and (max-width: 600px) {
  .user-right {
    display: none;
  }
}
.back {
  background-color: #f8f8f8;
  height: 100%;
}
.mo_block {
  position: relative;
  top: 0;
  width: 100%;
  height: 0;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
.mo-user {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: 45px;
  height: 100vh;
  .user-right {
    position: relative;
    width: 240px;
    right: 0;
    top: 0;
    height: 100%;
    transition: all 0.4s ease-in-out;
    background-color: white;
    z-index: 902;
  }
  .user-main {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    .user-main-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(255, 255, 255, 0.7);
      z-index: 900;
    }
  }
}
.menu-enter-active,
.menu-leave-active {
  transition: all 0.4s ease-in-out;
}
.menu-enter, .menu-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>